<template>
  <div class="chart-box">
    <div style="height: 100%; width: 100%" v-if="routePath == '/chart'">
      <el-row :gutter="10" type="flex" class="row-bg" justify="center">
        <el-col :span="12">
          <div class="chart-title">数据分析报表</div>
          <div ref="echartsContainer" style="height: 400px"></div
        ></el-col>
        <el-col :span="12"
          ><div class="chart-title">历史报警分布</div>
          <div ref="echartsContainer2" style="height: 400px"></div
        ></el-col>
      </el-row>
      <br />
      <el-row :gutter="10" type="flex" class="row-bg" justify="center">
        <el-col :span="12"
          ><div class="chart-title">故障频次与失效累计比率</div>
          <div ref="echartsContainer3" style="height: 400px"></div
        ></el-col>
        <el-col :span="12">
          <div class="chart-title">30天内故障与移动3个月月平均故障</div>
          <div ref="echartsContainer4" style="height: 400px"></div
        ></el-col>
      </el-row>
    </div>
    <el-carousel v-else :autoplay="false" arrow="always">
      <el-carousel-item>
        <div class="chart-title">数据分析报表</div>
        <div ref="echartsContainer" style="height: 400px"></div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="chart-title">历史报警分布</div>
        <div ref="echartsContainer2" style="height: 400px"></div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="chart-title">故障频次与失效累计比率</div>
        <div ref="echartsContainer3" style="height: 400px"></div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="chart-title">30天内故障与移动3个月月平均故障</div>
        <div ref="echartsContainer4" style="height: 400px"></div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import {
  immsAnalysisGet1,
  immsAnalysisGet2,
  immsAnalysisGet3,
  immsAnalysisGet4,
} from "@/api/home/main";

export default {
  name: "EChartsComponent",
  data() {
    return {
      categoryData: [],
      barData: [],
      lineData: [],
      routePath: "",
    };
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
  },
  async mounted() {
    this.routePath = this.$route.path;
    this.initChart1();
    this.initChart2();
    this.initChart3();
    this.initChart4();
  },
  methods: {
    async initChart1() {
      let res = await immsAnalysisGet1();
      this.categoryData = res.data.map((i) => i.name);
      this.barData = res.data.map((i) => i.kind);
      this.lineData = res.data.map((i) => i.times);

      var myChart = echarts.init(this.$refs.echartsContainer);
      myChart.setOption({
        // ECharts 配置项
        // title: {
        //   text: "数据分析报表",
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            magicType: { show: true, type: ["line", "bar"] },
          },
        },
        legend: {
          data: ["故障种类", "次数"],
        },
        xAxis: [
          {
            type: "category",
            data: [...this.categoryData],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "故障种类",
            min: 0,
            max: 40,
            interval: 10,
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "次数",
            min: 0,
            max: 40,
            interval: 10,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "故障种类",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " ml";
              },
            },
            data: [...this.barData],
          },
          {
            name: "次数",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [...this.lineData],
          },
        ],
      });
    },
    async initChart2() {
      let res = await immsAnalysisGet2();

      let arr = res.data || [];

      // 找出所有对象中的所有键
      let allKeys = Array.from(new Set(arr.flatMap((obj) => Object.keys(obj))));
      // 批量处理每个对象
      arr.forEach((obj) => {
        allKeys.forEach((key) => {
          if (!obj.hasOwnProperty(key)) {
            obj[key] = 0;
          }
        });
      });

      let obj = {};
      arr.forEach((item) => {
        for (let key in item) {
          if (key !== "name" && key !== "总计") {
            if (!obj[key]) {
              obj[key] = [];
            }
            obj[key].push(item[key]);
          }
        }
      });

      let charName = res.data.map((i) => i.name);
      let seriesData = [];

      for (let key in obj) {
        seriesData.push({
          name: key,
          type: "bar",
          stack: "history",
          emphasis: {
            focus: "series",
          },
          data: [...obj[key]],
        });
      }

      var myChart = echarts.init(this.$refs.echartsContainer2);
      myChart.setOption({
        // title: {
        //   text: "历史报警分布",
        // },
        tooltip: {
          position: [50, 10],
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [...charName],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [...seriesData],
      });
    },
    async initChart3() {
      let res = await immsAnalysisGet3();
      var myChart = echarts.init(this.$refs.echartsContainer3);
      let chartData = res.data || [];
      let listName = [];
      let list1 = [];
      let list2 = [];
      chartData.map((i) => {
        let { name, scale, times } = i;
        listName.push(name);
        list1.push(scale.replace("%", ""));
        list2.push(times.replace("次", ""));
      });
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            // dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            // restore: { show: true },
            // saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["故障频次", "失效累计比率"],
        },
        xAxis: [
          {
            type: "category",
            data: [...listName],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "故障频次",
            min: 0,
            // max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "失效累计比率",
            min: 0,
            max: 100,
            interval: 25,
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: "故障频次",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [...list2],
          },
          {
            name: "失效累计比率",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + "%";
              },
            },
            data: [...list1],
          },
        ],
      });
    },
    async initChart4() {
      let res = await immsAnalysisGet4();
      var myChart = echarts.init(this.$refs.echartsContainer4);
      let chartData = res.data || [];
      let listName = [];
      let list1 = [];
      let list2 = [];
      chartData.map((i) => {
        listName.push(i.name);
        list1.push(i["90days"]);
        list2.push(i["30days"]);
      });
      myChart.setOption({
        // title: {
        //   text: "30天内故障与移动3个月月平均故障",
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: [...listName],
        },
        series: [
          {
            name: "移动月平均(90天)",
            type: "bar",
            data: [...list1],
          },
          {
            name: "30",
            type: "bar",
            data: [...list2],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-box {
  text-align: center;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
::v-deep .el-carousel__container {
  height: 450px !important;
}
.chart-title {
  margin: 8px 0;
}
</style>
